<template>
    <el-dialog 
    v-model="dialogVisible" 
    title="test"
    :before-close="handleClose"
    custom-class="z-dialog" 
    center 
    :close-on-click-modal="false"
    :width="400">
        <div>
            <el-input v-model="form.name" placeholder="请输入名称" clearable></el-input>
            <el-input v-model="form.icon" placeholder="请输入图标" clearable></el-input>
            <el-input v-model="form.link" placeholder="请输入链接" clearable></el-input>

            <el-select
            v-model="form.type"
            clearable
            placeholder="请选择类型"
            >
                <el-option
                v-for="item in typeOptions"
                :key="item"
                :label="item"
                :value="item"
                />
            </el-select>

            <el-select
            v-model="form.tag"
            multiple
            clearable
            filterable
            allow-create
            default-first-option
            :reserve-keyword="false"
            placeholder="请选择标签"
            >
                <el-option
                v-for="item in tagOptions"
                :key="item"
                :label="item"
                :value="item"
                />
            </el-select>

            <el-input v-model="form.component" placeholder="请输入插槽名称" clearable></el-input>
            <el-input v-model="form.islandComponent" placeholder="请输入灵动岛插槽" clearable></el-input>
            <el-input v-model="form.background" placeholder="请输入背景颜色" clearable></el-input>
            <el-input v-model="form.intro" placeholder="请输入介绍" clearable></el-input>
            是否外部打开 <el-switch v-model="form.isOut"></el-switch>
            是否支持灵动岛  <el-switch v-model="form.isIsland"></el-switch>
            是否显示    <el-switch v-model="form.isShow"></el-switch>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="handleSend" :loading="loading">确 定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script lang="ts">
import { defineComponent, getCurrentInstance, onMounted, reactive, ref, toRefs, watch } from 'vue';
export default defineComponent({
    name: 'addApp',
    components: {},
    props: {
        visible:{
            type:Boolean,
            default:false
        }
    },
    emits: ['close'],
    setup (props, context) 
    {
        const { proxy }:any = getCurrentInstance();
        let data = reactive({
            loading:false,
            dialogVisible:props.visible,
            form:{
                name:'',
                isOut:true,
                icon:'',
                link:'',
                type:'',
                tag:'' as any,
                component:'',
                isIsland:false,
                islandComponent:'',
                hot:0,
                isShow:true,
                background:'',
                intro:''
            },
            typeOptions:[
                'web', 'iframe', 'slot'
            ],
            tagOptions:[
                '效率', '影音', '新闻', '科技', '工具',
                '图片', '学习', '游戏', '购物', '设计', '社交', '阅读',
                '出行', '其他'
            ]

        });

        let methods = { 
            handleClose ()
            {
                data.dialogVisible = false;
                context.emit('close');
            },
            async handleSend ()
            {
                // data.form.tag = data.form.tag.split(',');
                data.form.icon = '/icon/' + data.form.icon;
                proxy.$http.app.addApp(data.form).then((res) => 
                {
                    proxy.$message.success('成功');
                    data.form = {
                        name:'',
                        isOut:true,
                        icon:'',
                        link:'',
                        type:'',
                        tag:'' as any,
                        component:'',
                        isIsland:false,
                        islandComponent:'',
                        hot:0,
                        isShow:true,
                        background:'',
                        intro:''
                    };
                },
                (err) => 
                {
                    proxy.$message.error(err);
                });
            }
        };

        return {
            ...toRefs(data),
            ...methods
        };
    }
});

</script>
<style lang='scss' scoped>
.el-input,
.el-select {
    margin: 5px 0;
}
</style>
